<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@ include file="/common/links.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            'use strict';
            var topicjson={
                "response": [
                       {
                           "id": "1",
                           "elementName": "Grouping",
                           level:"0", parent:"", isLeaf:false, expanded:false, loaded:true
                       },
                       {
                           "id": "1_1",
                           "elementName": "Simple Grouping",
                           level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true
                       },
                       {
                           "id": "1_2",
                           "elementName": "May be some other grouping",
                           level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true
                       },
                       {
                           "id": "2",
                           "elementName": "CustomFormater",
                           level:"0", parent:"", isLeaf:false, expanded:true, loaded:true
                       },
                       {
                           "id": "2_1",
                           "elementName": "Image Formatter",
                           level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true
                       },
                       {
                           "id": "2_1",
                           "elementName": "Anchor Formatter",
                           level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true
                       }
                   ]
                },
                grid;

            $('<table id="list2"></table>').appendTo('#topics');

            grid = jQuery("#list2");
            grid.jqGrid({
                datastr: topicjson,
                datatype: "jsonstring",
                height: "auto",
                //loadui: "disable",
                colNames: ["Items","id","url"],
                colModel: [
                    {name: "elementName", width:250, resizable: false},
                    {name: "id",width:250, hidden:false, key:true},
                    {name: "url",width:250,hidden:false}
                ],
                treeGrid: true,
                treeGridModel: "adjacency",
                caption: "jqGrid Demos",
                ExpandColumn: "elementName",
                //autowidth: true,
                //width: 180,
                rowNum: 10000,
                //ExpandColClick: true,
                //treeIcons: {leaf:'ui-icon-document-b'},
                jsonReader: {
                    repeatitems: false,
                    root: "response"
                }
            });
        });
    </script>
</head>
<body>
    <div id="topics"></div>
</body>
</html>